<template>
  <div class="myloding" v-if="show">
    <div class="box">
      <img :src="src" alt />
      <p>{{msg}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "myloding",
  props: {
    show: {
      default: false,
      type: Boolean,
    },
    msg: {
      type: String,
      default: "拼命加载中....",
    },
    src: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.myloding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    width: 150px;
    height: 150px;
    border-radius: 15px;
    text-align: center;
    img {
      width: 100%;
      border-radius: 15px 15px 0 0;
    }
    p {
      margin-top: 10px;
    }
  }
}
</style>